<template>
	<view class="bg">
		<view class="form">
			<view class="label">新密码：</view>
			<view class="value" :style="{'border-bottom':pwdSelect?'1px solid #408CFF':'1px solid #e6e6e6'}">
				<input class="uni-input" name="input" password placeholder="请输入6位数字新密码" :value="password" @input="getNewPassword" maxlength="6" @focus="changeBorder('pwdSelect')"/>
			</view>
			<view class="label">确认密码：</view>
			<view class="value" :style="{'border-bottom':confrimSelect?'1px solid #408CFF':'1px solid #e6e6e6'}">
				<input class="uni-input" name="input" password placeholder="请确认密码" :value="confirmPwd" @input="getConfirmPassword" maxlength="6" @focus="changeBorder('confrimSelect')"/>
			</view>
			<view class="label" v-if="!readonly">手机号：</view>
			<view class="value" :style="{'border-bottom':mobileSelect?'1px solid #408CFF':'1px solid #e6e6e6'}" v-if="!readonly">
				<input class="uni-input" name="input" placeholder="请输入手机号" :value="mobile" @input="getMobile" type="number" maxLength="11" @focus="changeBorder('mobileSelect')"/>
			</view>
			<view class="label" v-if="readonly">手机号：</view>
			<view class="value" :style="{'border-bottom':mobileSelect?'1px solid #408CFF':'1px solid #e6e6e6'}" v-if="readonly">
				<text style="font-size: 28upx;color: #777;">{{phone}}</text>
			</view>
			<view class="label">验证码：</view>
			<view class="code" :style="{'border-bottom':codeSelect?'1px solid #408CFF':'1px solid #e6e6e6'}">
				<input class="uni-input input-code" name="input" placeholder="请输入验证码" :value="code" @input="getCode" maxlength="6" @focus="changeBorder('codeSelect')"/>
				<button @click="sendMessage" :disabled="disabled" class="btn-code">
					<text v-show="!disabled">发送验证码</text>
					<text v-show="disabled">({{ss}} 秒)后重新发送</text>
				</button>
			</view>
		</view>
		<view class="bottom">
			<button class="btn" :loading="loading" @click="onSubmit">提交</button>
		</view>
	</view>
</template>

<script>
	import { decryptDes } from '@/utils/utils';
	export default {
		data() {
			return {
				cardId: '',
				oldPassword: '',
				password: '',
				confirmPwd: '',
				mobile: '',
				phone: '',
				code: '',
				readonly: false,
				pwdSelect: false,
				confrimSelect: false,
				mobileSelect: false,
				codeSelect: false,
				disabled: false,
				ss: 60,
				uid: '',	//短信验证码
				loading: false,
				pagekey: '',
				redir: '',
				timeout: '',
			}
		},
		async onLoad(option) {
			if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
		　　		WeixinJSBridge.invoke('setFontSizeCallback', {
			　　		'fontSize': 0
			　　});
			　　// 重写设置网页字体大小的事件
			　　WeixinJSBridge.on('menu:setfont', function () {
			　　　　WeixinJSBridge.invoke('setFontSizeCallback', {
			　　　　　　'fontSize': 0
			　　　　});
			　　});
			　
			};
			
			this.cardId = option.cardId
			//获取卡是否设置密码
			let ifsetPassword = await this.$req.userData("card/getCardIfSetPassword", {
				id: option.cardId
			})
			this.oldPassword = ifsetPassword.data
			
			let pk = await this.$req.sendCheck('/pageKey/get.dnl')
			let key = decryptDes(pk.data, 'shendawl', ['s', 'h', 'e', 'n', 'd', 'a', 'w', 'l'])
			this.pagekey = key
			if (option._redir != undefined) {
				this.redir = decodeURIComponent(atob(option._redir))
			}
			 this.$req.userData("card/getCardIfPhone", {
				id: option.cardId
			}).then(phoneBack=>{
				let ifTiePhone = phoneBack.data.value
				if (ifTiePhone != null && ifTiePhone != '') {
					this.phone = ifTiePhone.substring(0, 3) + "****" + ifTiePhone.substring(ifTiePhone.length - 4, ifTiePhone.length)
					this.mobile = ifTiePhone;
					this.readonly = true;
				}
			})
		
			//this.phone = ifTiePhone
			uni.hideLoading()
		
		},
		methods: {
			async onSubmit(){
				let reg = /^\d{6}$/;
				if (!reg.test(this.password) || !reg.test(this.confirmPwd)) {
					uni.showToast({
						icon: "none",
						title: "请输入正确的6位数字密码"
					});
					return false;
				}
				if (this.password != this.confirmPwd) {
					uni.showToast({
						icon: "none",
						title: "两次密码输入不一致！",
						duration: 3000
					});
					return false;
				}
				if(this.mobile == ''&&!readonly){
					uni.showToast({
						icon: "none",
						title: "请输入手机号！",
						duration: 3000
					});
					return false
				}
				if (this.code == '') {
					uni.showToast({
						icon: "none",
						title: "请输入验证码！",
						duration: 3000
					});
					return false;
				}
				
				let req = ""
				// 展示就是更新密码 
				this.loadding = true;
				let obj = {}
				if (this.readonly) {
					try {
						obj = await this.$req.userData('card/updatePassword', {
							id: this.cardId,
							cardPassword: this.oldPassword,
							newCardPassword: this.password,
							uid: this.uid,
							phone: this.mobile,
							code: this.code
						})
					} catch (e) {
						
					}
					this.loadding = false
				} // 不展示就是设置密码
				else {
					try {
						obj = await this.$req.userData("card/settingPassword/recheck", {
							id: this.cardId,
							cardPassword: this.password,
							pagekey: this.pagekey,
							uid: this.uid,
							phone: this.mobile,
							code: this.code
						})
					} catch (e) {
						console.log(e)
					}
					this.loadding = false
				}
				this.pagekey = await this.$getPageKey();
				if (obj.code==10000) {
					uni.showToast({
						icon: "none",
						title: "操作成功！正在返回上一页",
						duration: 3000
					});
					if (this.redir != undefined&&this.redir !='') {
						setTimeout(() => {
							uni.navigateTo({
								url: "/" + this.redir
							})
						}, 2000)
					} else {
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/tabbar/cardList/index'
							})
						}, 2000)
					}
				
				} else {
					this.loadding = false
				}
			},
			getNewPassword(e){
				this.password = e.detail.value;
				this.pwdSelect = true;
				this.confrimSelect = false;
				this.mobileSelect = false;
				this.codeSelect = false;
			},
			getConfirmPassword(e){
				this.confirmPwd = e.detail.value;
				this.pwdSelect = false;
				this.confrimSelect = true;
				this.mobileSelect = false;
				this.codeSelect = false;
			},
			getMobile(e){
				this.mobile = e.detail.value;
				this.pwdSelect = false;
				this.confrimSelect = false;
				this.mobileSelect = true;
				this.codeSelect = false;
				this.uid = '';
				this.code = '';
				this.disabled = false;
			},
			getCode(e){
				this.code = e.detail.value;
				this.pwdSelect = false;
				this.confrimSelect = false;
				this.mobileSelect = false;
				this.codeSelect = true;
			},
			changeBorder(obj){
				let arr = ['pwdSelect', 'confrimSelect', 'mobileSelect', 'codeSelect'];
				for(let item of arr){
					this[item] = false;
					if(item==obj){
						this[item] = true;
					}
				}
			},
			//发送验证码
			async sendMessage() {
				if (!this.readonly&&!this.mobile) {
					this.$message("请输入手机号！")
					return false
				}
				if (!this.readonly&&!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.mobile))) {
					this.$message("您输入的手机号有误！")
					return false
				}
				//获取加密串
				let pk = await this.$req.sendCheck('/msg/pageKey.dnl', {
					messageFlag: 'XIAOXIANG'
				})
				let messageKey = decryptDes(pk.data, 'shendawl', ['s', 'h', 'e', 'n', 'd', 'a', 'w', 'l'])
				
				this.disabled = true;
				this.ss = 60;
				this.timeout = setInterval(v => {
					this.ss--;
					if (this.ss == 0) {
						this.disabled = false;
						window.clearInterval(this.timeout)
					}
				}, 1000)
				
				let backmsg = await this.$req.sendCheck('/msg/send/identifyCode', {
					uid: messageKey,
					phone: this.mobile,
					messageFlag: 'XIAOXIANG',
					remark:"修改密码"
				})
				this.uid = backmsg.data
			},
		}
	}
</script>

<style>
	.bg{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-image: linear-gradient(to top, #fdfbfb 0%, white 100%);
	}
	.form{
		width: 90%;
		height: auto;
		position: relative;
		top: 0;
		left: 0;
		padding: 5% ;
	}
	.label{
		width: 100%;
		height: 80upx;
		position: relative;
		line-height: 80upx;
		font-size: 28upx;
		color: #333333;
		margin-top: 10px;
	}
	.value{
		width: 100%;
		height: 80upx;
		position: relative;
		border-bottom: 1px solid #e6e6e6;
	}
	.code{
		width: 100%;
		height: 80upx;
		position: relative;
		border-bottom: 1px solid #e6e6e6;
		position: relative;
		justify-content: space-between;
		align-items: center;
	}
	.input-code{
		width: 60%;
		display: inline-flex;
		
	}
	.btn-code{
		width: auto;
		height: 60upx;
		position: relative;
		padding: 0 24upx;
		background-image: linear-gradient(120deg, #A0C6FF 0%, #408CFF 100%);
		color: #ffffff;
		font-size: 28upx;
		border-radius: 4px;
		display: inline-flex;
		align-items: center;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		position: absolute;
		right: 0;
	}
	.uni-input {
	    height: 50upx;
	    padding: 7px 0;
	    line-height: 25px;
	    font-size: 30upx;
	    background: #FFF;
	    -webkit-box-flex: 1;
	    -webkit-flex: 1;
	    flex: 1;
	}
	.checkbox{
		width: 100%;
		height: 40upx;
		position: relative;
		display: flex;
		align-items: center;
		font-size: 24upx;
		color: #777777;
		padding: 10upx 0;
		margin-bottom: 20upx;
	}
	.bottom{
		position: fixed;
		width: 90%;
		height: auto;
		bottom: 0;
		left: 0;
		padding: 20px 5%;
	}
	.btn{
		width: 100%;
		height: 80upx;
		text-align: center;
		line-height: 80upx;
		font-size: 30upx;
		color: #FFFFFF;
		background-image: linear-gradient(to bottom, #A0C6FF 0%, #408CFF 100%);
		letter-spacing: 5px;
	}
</style>
